<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript">
			$(function() {
				$("#time-btn").click(function() {
					var now = $("#now-time").html();
					if ("开始" == $(this).val()) {
						$(this).attr("time", now);
						$(this).val("结束");
						$("#time-list").append(now + " - ");
					} else {
						var last = $(this).attr("time");
						var nows = now.split(":");
						var lasts = last.split(":");
						$(this).val("开始");
						$("#time-list").append(now + " : ");
						$("#time-list").append(calculateTime(now, last));
						$("#time-list").append("<br/>");
					}
				});
			})
			
			function calculateTime(now, last) {
				var nows = now.split(":");
				var lasts = last.split(":");
				var nowTime = Number(nows[0] * 60 * 60) + Number(nows[1] * 60) + Number(nows[2]);
				var lastTime = Number(lasts[0] * 60 * 60) + Number(lasts[1] * 60) + Number(lasts[2]);
				var dif = nowTime - lastTime;
				var h = parseInt(dif / (60 * 60));
				var m = parseInt((dif - (h * 60 * 60)) / 60);
				var s = parseInt(dif - (h * 60 * 60) - (m * 60));
				console.log(nows + ":" + lasts);
				console.log(dif + ":" + h + ":" + m + ":" + s);
				return h + ":" + checkTime(m) + ":" + checkTime(s);
			}
			// 开始计时
			function startTime() {
				var today = new Date()
				var h = today.getHours()
				var m = today.getMinutes()
				var s = today.getSeconds()
				// add a zero in front of numbers<10
				m = checkTime(m)
				s = checkTime(s)
				document.getElementById('now-time').innerHTML = h + ":" + m + ":" + s
				t = setTimeout('startTime()', 500)
			}
			// 将个位数前加0
			function checkTime(i) {
				if(i < 10) {
					i = "0" + i
				}
				return i
			}
		</script>
	</head>

	<body onload="startTime()">
		<div id="now-time"></div>
		<input id="time-btn" type="button" value="开始" time=""/>
		<div id="time-list"></div>
	</body>

</html>